<template>
  <div class="security-container">
    <el-card class="security-card">
      <div slot="header">
        <span>安全设置</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="bind-title">绑定第三方登录</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col 
          v-for="provider in providers" 
          :key="provider.id"
          :span="8" 
          class="provider-col"
        >
          <div 
            class="provider-item"
            :class="{ 'bound': isBound(provider.id) }"
            @click="bindProvider(provider)"
          >
            <div class="provider-icon" :class="provider.id">
              <i :class="provider.icon"></i>
            </div>
            <div class="provider-info">
              <div class="provider-name">{{ provider.name }}</div>
              <div class="bind-status">
                <el-tag v-if="isBound(provider.id)" type="success">已绑定</el-tag>
                <el-tag v-else type="info">未绑定</el-tag>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" style="margin-top: 30px;">
        <el-col :span="24">
          <div class="bind-title">操作说明</div>
          <div class="operation-guide">
            <p>1. 点击未绑定的第三方平台图标，跳转到授权页面进行绑定</p>
            <p>2. 绑定后可以使用第三方账号快速登录系统</p>
            <p>3. 解绑操作请联系系统管理员</p>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SecuritySetting',
  data() {
    return {
      // 支持的第三方登录提供商列表
      providers: [
        {
          id: 'maxkey',
          name: 'MaxKey',
          icon: 'el-icon-link'
        },
        {
          id: 'wechat',
          name: '微信',
          icon: 'el-icon-chat-line-round'
        },
        {
          id: 'qq',
          name: 'QQ',
          icon: 'el-icon-user'
        },
        {
          id: 'github',
          name: 'GitHub',
          icon: 'el-icon-star-off'
        },
        {
          id: 'dingtalk',
          name: '钉钉',
          icon: 'el-icon-bell'
        },
        {
          id: 'gitee',
          name: 'Gitee',
          icon: 'el-icon-collection-tag'
        }
      ],
      // 用户已绑定的提供商列表（模拟数据）
      boundProviders: ['maxkey', 'github']
    }
  },
  methods: {
    // 检查是否已绑定指定提供商
    isBound(providerId) {
      return this.boundProviders.includes(providerId)
    },
    
    // 绑定提供商
    bindProvider(provider) {
      if (this.isBound(provider.id)) {
        this.$message.warning(`已绑定${provider.name}`)
        return
      }
      
      // 调用后端接口发起绑定流程
      this.$message.info(`正在绑定${provider.name}...`)
      // 实际项目中应该跳转到对应的OAuth授权页面
      console.log(`绑定 ${provider.name} (${provider.id})`)
    }
  }
}
</script>

<style scoped>
.security-container {
  padding: 20px;
}

.security-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.bind-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}

.provider-col {
  margin-bottom: 20px;
}

.provider-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
  cursor: pointer;
}

.provider-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.provider-item.bound {
  background-color: #f0f9ff;
  border-color: #b3d8ff;
}

.provider-icon {
  font-size: 24px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  background-color: #409EFF;
  margin-right: 15px;
}

.provider-icon.maxkey {
  background-color: #1890ff;
}

.provider-icon.wechat {
  background-color: #07c160;
}

.provider-icon.qq {
  background-color: #12b7f5;
}

.provider-icon.github {
  background-color: #333;
}

.provider-icon.dingtalk {
  background-color: #0089ff;
}

.provider-icon.gitee {
  background-color: #c71d23;
}

.provider-info {
  flex: 1;
}

.provider-name {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 500;
}

.operation-guide {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  color: #606266;
  line-height: 1.6;
}

.operation-guide p {
  margin: 5px 0;
}
</style>